{extend name="../../../view/public/base" /}

{block name="css"}
<style>
    .layui-form-selected dl {
        height: 200px !important;
        overflow-y: scroll !important;
    }
</style>
{/block}

{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <div class="layui-card" style="padding: 20px">
                <blockquote class="layui-elem-quote">
                    温馨提示：<br>
                    1 默认安全密码：123456<br>
                    2 自动注册后，您会收到账号和密码
                </blockquote>
                <br><br>
                <form class="layui-form" lay-filter="addForm" autocomplete="off">
                    <input type="hidden" id="id" name="id" value="{$data.id? $data.id : 0}"/>


                    <!--单图-->
                    <!--<div class="layui-form-item">-->
                        <!--<label class="layui-form-label">头像</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="hidden" name="avatar" class="layui-input">-->
                            <!--<div class="layui-upload">-->
                                <!--<button type="button" class="layui-btn layui-btn-normal" id="avatar">上传头像</button>-->
                                <!--<div class="layui-upload-list" id="avatarPreview" style="display: flex;">-->
                                    <!--&lt;!&ndash;加载默认图片&ndash;&gt;-->
                                    <!--<script>-->
                                        <!--getImagesHtmlForEdit('', 'avatar')-->
                                    <!--</script>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--<div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="required" placeholder="用户名至少5位不能带中文和特殊符号"  onkeyup="this.value=this.value.replace(/[^\w_]/g,'');" autocomplete="off" class="layui-input" value="{$data.username?$data.username:''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">昵称</label>
                        <div class="layui-input-block">
                            <input type="text" name="nickname" lay-verify="required" placeholder="昵称" autocomplete="off" class="layui-input" value="{$data.nickname?$data.nickname:''}">
                        </div>
                    </div>-->

                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-block">
                            <input id="mobile" type="number" name="mobile" lay-verify="required" placeholder="11位手机号"   autocomplete="off" class="layui-input" value="{$data.mobile?$data.mobile:''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-inline">
                            <input type="number" name="code" lay-verify="required" placeholder="请输入验证码"   autocomplete="off" class="layui-input" value="{$data.mobile?$data.mobile:''}">
                        </div>
                        <div class="layui-input-inline">
                            <button id="send" type="button" class="layui-btn layui-btn-normal" onclick="sendSms()">获取验证码</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password"  placeholder="密码至少8位不能带中文和特殊符号" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">确认密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password_confirm"  placeholder="请再次输入密码" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <!--<div class="layui-form-item">
                        <label class="layui-form-label">安全密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="safe_password"  placeholder="安全密码使用6位数字"  autocomplete="off" class="layui-input" >
                        </div>
                    </div>-->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">立即注册！</button>
                        </div>
                    </div>
                </form>
                <br><br>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var layer, form, bwajax, upload, $, laydate,manage,xmSelect,eleTree;

    layui.use(['layer', 'form', 'bwajax', 'upload', 'laydate', 'manage', 'xmSelect','eleTree'], function () {
        layer = layui.layer;
        form = layui.form;
        bwajax = layui.bwajax.instance();
        upload = layui.upload;
        $ = layui.jquery;
        laydate = layui.laydate;
        manage = layui.manage;
        xmSelect = layui.xmSelect;
        eleTree = layui.eleTree;

        //添加时间 日期时间选择器
        laydate.render({
            elem: '#add_time'
            ,type: 'datetime'
        });


        //单图单图上传
        var uploadInst = bw_upload(upload, 'avatar', 'image');



        //监听提交按钮
        form.on('submit(submitBtn)', function (obj) {
            data = obj.field;

             // if(!data.avatar) {layer.msg('请上传头像', {icon: 2});return false}
            // if(!data.username) {layer.msg('用户名不能为空', {icon: 2});return false}
            // if(!data.nickname) {layer.msg('昵称不能为空', {icon: 2});return false}
            if(!data.mobile) {layer.msg('手机号不能为空', {icon: 2});return false}

            if(data.password !== data.password_confirm) {layer.msg('两次密码不一致', {icon: 2});return false}

            delete data['eleTree-node'];
            delete data.select;
            var post_url = "/manage/member/add";
            if(data['id']!=0){
                post_url = "/manage/member/edit";

            }
            //console.log(data);return false;
            //ajax调用后台接口
            bwajax.post(post_url, data)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('注册成功', {icon: 1}, function () {
                            submitSuccess();
                        });
                    } else {
                        layer.msg(response.data.msg, {icon: 2});

                    }
                })

            return false;
        })
    });

    /**
     * 发送验证码
     */
    function sendSms(){
        var mobile = $('#mobile').val();
        if(!(/^1\d{10}$/.test(mobile))) {layer.msg('请填写正确的手机号', {icon: 2});return false}

        var data = {
            mobile: mobile,
            event: 'register'
        };
        bwajax.post('/api/v1/sms/send', data)
            .then(function (response) {
                if (response.data.data.errcode === 0) {
                    var sendBtn = $('#send');
                    var time = 60;
                    var timer = null;
                    sendBtn.innerHTML = time + '秒后重新发送';
                    sendBtn.attr('disabled', true);  // 禁用按钮
                    sendBtn.addClass('disabled');   // 添加class 按钮样式变灰
                    timer = setInterval(function(){
                        // 定时器到底了 兄弟们回家啦
                        if(time == 1){
                            clearInterval(timer);
                            sendBtn.text('获取验证码');
                            sendBtn.attr('disabled', false);  // 禁用按钮
                            sendBtn.removeClass('disabled');
                        }else{
                            time--;
                            sendBtn.text(time + '秒后重新发送');
                        }
                    }, 1000)

                    layer.msg('发送成功', {icon: 1});
                } else {
                    layer.msg(response.data.msg, {icon: 2});
                }
            })
    }

    function submitSuccess() {
        parent.location.reload();//这里调用的是父页面的reload方法
        setTimeout(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }, 1000);
    }
</script>
{/block}